<template>
  <div class="mt-18px w-full flex flex-col bg-white rounded-16px px-18px py-24px box-border">
    <div class="flex flex-row items-center">
      <img src="@/assets/mark.png" alt="rating" class="w-24px h-24px" />
      <h2 class="ml-6px h-24px leading-24px text-24px font-bold text-#242633">
        5.00 · 用户评论 ({{ total }})
      </h2>
    </div>
    <div class="mt-28px w-full flex flex-row" v-for="item in commitList" :key="item.id">
      <div class="ant-image" style="width: 44px; height: 44px">
        <img
          class="ant-image-img w-44px h-44px group-hover:scale-103 transition rounded-50%"
          :src="item.user_info?.header_img"
          style="height: 44px"
        /><!----><!---->
      </div>
      <!---->
      <div class="ml-8px flex-1 flex flex-col">
        <div class="mt-4px h-16px flex flex-row items-center">
          <div class="h-16px leading-16px text-16px text-#242633">
            {{ item.user_info?.nick_name }}
          </div>
          <div class="flex-1"></div>
          <div class="mt-5px h-16px leading-16px text-12px text-#B8BBCC">
            {{ dayjs(item.created_at).format('YYYY-MM-DD HH:mm') }}
          </div>
        </div>
        <div class="mt-5px h-13px flex flex-row items-center">
          <img src="@/assets/mark.png" alt="eva" class="mr-4px w-14px h-13px" /><img
            src="@/assets/mark.png"
            alt="eva"
            class="mr-4px w-14px h-13px"
          /><img src="@/assets/mark.png" alt="eva" class="mr-4px w-14px h-13px" /><img
            src="@/assets/mark.png"
            alt="eva"
            class="mr-4px w-14px h-13px"
          /><img src="@/assets/mark.png" alt="eva" class="mr-4px w-14px h-13px" />
        </div>
        <div class="mt-6px w-full text-14px text-#525566 break-all">{{ item.content }}</div>
      </div>
    </div>
    <LoadMore :total="total" :loading="loading" :pageInfo="pageInfo" @loadMore="handleLoadMore" />
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getUserSkillsCommentList } from '@/api/game'
import LoadMore from '@/components/loadMore/index.vue'
import dayjs from 'dayjs'
const props = defineProps(['id'])
const commitList = ref([])
const total = ref(0)
const bagePageInfo = {
  page: 0,
  pageSize: 10
}
const pageInfo = ref(bagePageInfo)
const loading = ref(false)
const handleLoadMore = () => {
  loading.value = true
  getData(props.id).finally(() => {
    loading.value = false
  })
}
const getData = (id) => {
  return getUserSkillsCommentList({
    page: pageInfo.value.page + 1,
    pageSize: pageInfo.value.pageSize,
    id: id
  }).then((res) => {
    pageInfo.value.page = res.page
    pageInfo.value.pageSize = res.pageSize
    commitList.value = [...commitList.value, ...(res.list || [])]
    total.value = res.total || 0
  })
}
onMounted(() => {
  if (props.id && props.id != -1) {
    getData(props.id)
  }
})
</script>
<style lang="less" scopeds></style>
